/*
 * @Author: wangtao
 * @Date: 2021-02-18 11:21:01
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-22 17:31:54
 * @Description: file content
 */
import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  PixelRatio,
} from 'react-native';
import moment from 'moment';
import {
  empty01,
  iconAirplaneRed,
  iconAirplaneCoffee,
  iconAirplaneGreen,
} from '@/images';
import {
  Button,
  msg,
  XMListView,
  XMEmpty,
  XMHeader,
  BackImageOn
} from '@/common';
import {
  fontColorBlack,
  fontColorCoffee,
  fontColorDeepGray,
  fontColorDeepGreen,
  fontColorRed,
  fontColorSecDeepGray,
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp,
  splitLineColorLightGray,
  isAndroid
} from '@/styles';

import api from '@/api';

const { Submit } = Button;

export default class InsuranceApplyListMy extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  componentWillUnmount() {}

  render() {
    const {} = this.state;
    return (
      <View style={styles.container}>
        <XMHeader
          title='我的申请'
          renderLeft={() => {
            return (
              <BackImageOn onClick={() => {
                msg.emit('router: goToNext', {
                  routeName: 'InsuranceUser',
                });
              }}
              />
            );
          }}

        />
        <XMListView
          url='factoring-bps-api/api/v1/approval/page/applications'
          methods='GET'
          params={{}}
          dataPropsName='data.records'
          renderRow={(item, index) => this._renderItem(item, index)}
          renderEmpty={() => {
            return (
              <XMEmpty
                emptyImg={empty01}
                boxStyle={{ marginTop: px2dp(80) }}
                desc='您暂时没有申请'
              />
            );
          }}
          noMoreText='没有更多啦~'
          columnWrapperStyle={styles.bigBox}
          // style={{marginBottom: px2dp(200)}}
          numColumns={1}
        />
      </View>
    );
  }

  _renderItem = (item, index) => {
    return (
      <TouchableOpacity
        style={styles.itemWrap}
        activeOpacity={0.8}
        onPress={() => {
          if (item.applicationStatus.code == 'NOT_SUBMITTED') {
            console.log('🚀🚀🚀wimi======>>>item', item);
            msg.emit('router: goToNext', {
              routeName: 'InsuranceApplyForm',
              applicationNo: item.applicationNo,
            });
          } else {
            msg.emit('router: goToNext', {
              routeName: 'InsuranceApplyMy',
              id: item.id,
            });
          }
        }}
      >
        <View style={styles.itemContent}>
          <View style={styles.itemLeft}>
            <View style={styles.labelWrap}>
              <Text style={styles.label}>
                {item.carNo ? '车  牌  号：' : '发动机号：'}
              </Text>
              <Text style={styles.labelValue}>
                {item.carNo ? item.carNo : item.engineNo}
              </Text>
            </View>
            <View style={styles.labelWrap}>
              <Text style={styles.label}>提交时间：</Text>
              <Text style={styles.labelValue}>
                {item.updateTime ? moment(item.updateTime).format('YYYY.MM.DD HH:mm') : '-'}
              </Text>
            </View>
          </View>
          <View style={styles.itemRight}>
            {this._renderStatus(item.applicationStatus)}

            {/* <Image
                  source={iconSuccessTextGreen}
                  style={styles.iconTextImg}
                  resizeMode="stretch"
                /> */}
          </View>
        </View>
        {/*  */}
        {this._renderBtn(item)}
      </TouchableOpacity>
    );
  };

  //
  _renderStatus = (applicationStatus) => {
    switch (applicationStatus.code) {
    // 未提交
    case 'NOT_SUBMITTED':
      return (
        <>
          <Image
            source={iconAirplaneRed}
            style={styles.iconAirImg}
            resizeMode='stretch'
          />
          <Text style={styles.iconStatusText}>{applicationStatus.name}</Text>
        </>
      );
      // 已提交
    case 'SUBMITTED':
      return (
        <>
          <Image
            source={iconAirplaneCoffee}
            style={styles.iconAirImg}
            resizeMode='stretch'
          />
          <Text style={[styles.iconStatusText, { color: fontColorCoffee }]}>
            {applicationStatus.name}
          </Text>
        </>
      );
      // 审核中
    case 'WAIT_AUDIT':
      return (
        <>
          <Image
            source={iconAirplaneCoffee}
            style={styles.iconAirImg}
            resizeMode='stretch'
          />
          <Text style={[styles.iconStatusText, { color: fontColorCoffee }]}>
            {applicationStatus.name}
          </Text>
        </>
      );
      // 审批通过
    case 'APPROVED':
      return (
        <>
          <Image
            source={iconAirplaneGreen}
            style={styles.iconAirImg}
            resizeMode='stretch'
          />
          <Text style={[styles.iconStatusText, { color: fontColorDeepGreen }]}>
            {applicationStatus.name}
          </Text>
        </>
      );
      // 审批拒绝
    case 'REJECT':
      return (
        <>
          <Image
            source={iconAirplaneRed}
            style={styles.iconAirImg}
            resizeMode='stretch'
          />
          <Text style={[styles.iconStatusText, { color: fontColorRed }]}>
            {applicationStatus.name}
          </Text>
        </>
      );
    }
  };

  _renderBtn = (item) => {
    switch (item.applicationStatus.code) {
    case 'SUBMITTED':
      return null;
    case 'NOT_SUBMITTED':
      return (
        <View style={styles.itemBtnWrap}>
          <Submit
            text='删除申请'
            boxStyle={{
              width: px2dp(160),
              height: px2dp(56),
              borderRadius: px2dp(12),
              overflow: 'hidden',
              backgroundColor: mainBgColorWhite,
              borderWidth: 1 / PixelRatio.get(),
              borderColor: fontColorSecDeepGray,
            }}
            btnStyle={{}}
            btnTextStyle={{
              fontSize: px2dp(28),
              color: fontColorSecDeepGray,
            }}
            onClick={() => {
              msg.emit('app:messageBox', {
                isVisible: true,
                title: '删除申请',
                text: '确定删除该申请！',
                okText: '确定',
                cancelText: '取消',
                okFn: () => {
                  this.applicationInsuranceDelete(item.id);
                },
                cancelFn: () => {
                  console.log('🚀🚀🚀wimi======>>>cancelFn');
                },
              });
            }}
          />
        </View>
      );
    }
  };

  // 删除我的申请
  applicationInsuranceDelete = (id) => {
    api.insurance.applicationInsuranceDelete(id).then((res) => {
      if (res.success) {
        msg.emit('router: refreshRoute', {
          routeName: 'InsuranceApplyListMy',
        });
      } else {
        msg.emit('app:tip', { text: res.msg });
      }
    });
  };

  onChange = (key, val) => {
    this.setState({ [key]: val });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: mainBgColorLightGray,
    alignItems: 'center',
  },
  itemWrap: {
    width: px2dp(702),
    borderRadius: px2dp(16),
    overflow: 'hidden',
    marginTop: px2dp(24),
    backgroundColor: mainBgColorWhite,
    paddingHorizontal: px2dp(24),
  },
  itemContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: px2dp(32),
  },
  labelWrap: {
    flexDirection: 'row',
    paddingVertical: px2dp(8),
  },
  label: {
    color: fontColorDeepGray,
    fontSize: px2dp(30),
  },
  labelValue: {
    color: fontColorBlack,
    fontSize: px2dp(30),
    fontWeight: 'bold',
    width: px2dp(300),
  },
  itemRight: {
    alignItems: 'center',
    width: px2dp(200),
  },
  iconAirImg: {
    width: px2dp(40),
    height: px2dp(40),
  },
  iconTextImg: {
    width: px2dp(169),
    height: px2dp(114),
  },
  iconStatusText: {
    fontSize: px2dp(24),
    fontWeight: 'bold',
    color: fontColorRed,
    marginTop: px2dp(12),
  },
  itemBtnWrap: {
    height: px2dp(112),
    justifyContent: 'center',
    alignItems: 'flex-end',
    paddingHorizontal: px2dp(10),
    borderTopColor: splitLineColorLightGray,
    borderTopWidth: 1 / PixelRatio.get(),
  },
});
